<script setup lang="ts">
import { reactive } from 'vue'
import { adminContractList, adminPayConfirm } from '@/api/admin'
import { Toast } from 'vant';
const leftBack = () => history.back();
const state:any = reactive({
    loading: false,
    type: 0,
    contractList: [],
    bool: false,
    selectType: 0,
    selectId: 0
})
const getContractList = async () => {
    state.loading = true
    const res:any = await adminContractList({
        is_contract_type: 4
    })
    if (res) {
        state.contractList = res.records
    } else {
        Toast(res.msg)
    }
    state.loading = false
}
const selectContract = (item:any) => {
    state.selectId = item.contract_id
    state.bool = true
}
const contractConfirm = async () => {
    const res = await adminPayConfirm({
        "contract_id": state.selectId
    })
    if (res) {
        Toast('发薪完成')
        getContractList()
    }
    state.bool = false
}
getContractList()
</script>
<template>
    <div class="wy-admin-page">
        <van-nav-bar title="发薪管理" left-arrow @click-left="leftBack" />
        <van-pull-refresh class="pay-list-top" v-model="state.loading" @refresh="getContractList">
            <div class="home-contract-list" v-for="(item, index) in state.contractList" :key="index">
                <dl>
                    <dt>
                        <h3>
                            {{ item.user_name }}
                            <i v-if="item.settle_salary">已完成</i>
                            <i v-else>审核中</i>
                        </h3>
                    </dt>
                    <dt>
                        <label>合约名称：</label>
                        <span>{{ item.contract_name }}</span>
                    </dt>
                    <dt>
                        <label>薪资发放：</label>
                        <span>{{ item.task_salary }}/个</span>
                    </dt>
                    <dt>
                        <label>合约周期：</label>
                        <span>{{ item.start_cycle_time.replaceAll('-', '.') }}-{{ item.end_cycle_time.replaceAll('-', '.') }}</span>
                    </dt>
                    <dt class="wy-flex">
                        <label>合约状态：</label>
                        <span>完成</span>
                    </dt>
                </dl>
                <div class="home-contract-bottom">
                    <button v-if="!item.settle_salary" @click="selectContract(item)">发放薪资</button>
                    <button v-else class="opacity">发放薪资</button>
                </div>
            </div>
            <van-loading v-if="state.loading">加载中...</van-loading>
            <div class="wy-no-data" v-if="!state.loading && state.contractList.length == 0">暂无数据</div>
        </van-pull-refresh>
        <van-popup v-model:show="state.bool" closeable round :style="{ width: ' 13.07rem', height: '8.75rem' }">
            <div class="admin-contract-popup">
                <h5>温馨提示</h5>
                <p>确定将合约薪资发放吗？</p>
                <button @click="contractConfirm()">确定</button>
            </div>
        </van-popup>
    </div>
</template>
<style scoped>
.pay-list-top {
    margin-top: 0.64rem;
}

.admin-contract-popup {
    padding: 1.4rem 1rem;
}

.admin-contract-popup h5 {
    font-size: 0.85rem;
    line-height: 0.85rem;
    margin-bottom: 0.8rem;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.admin-contract-popup p {
    font-size: 0.8rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.28rem;
    text-align: center;
    margin-bottom: 0.76rem;
}

.admin-contract-popup button {
    width: 10.99rem;
    height: 1.92rem;
    background: #FE9215;
    border: 0px solid #FF6F00;
    border-radius: 0.16rem;
    font-size: 0.85rem;
    line-height: 1.92rem;
    text-align: center;
    font-weight: 400;
    color: #FFFFFF;
    border: none;
}

.home-contract-bottom {
    border-top: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.6rem 0 0 0.2rem;
}

.home-contract-bottom button {
    width: 4rem;
    height: 1.39rem;
    background: #FE9215;
    border-radius: 0.16rem;
    font-size: 0.69rem;
    line-height: 1.39rem;
    text-align: center;
    font-weight: 100;
    color: #FFFFFF;
    border: none;
}

.home-contract-bottom button.opacity {
    opacity: 0.3;
}

.wy-admin-page {
    background: #f6f6f6;
    height: 100vh;
    overflow: auto;
}

.wy-flex {
    display: flex;
    align-items: center;
}

.home-contract-list {
    background: #FFFFFF;
    border-radius: 0.53rem;
    margin: 0 0.59rem 0.53rem;
    padding: 0.88rem 0.48rem 0.64rem;
}

.contract-progress {
    flex: 1;
}

dl {}

dl dt {
    margin-bottom: 0.51rem;
}

dl dt h3 {
    font-size: 0.91rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 0.91rem;
    margin-bottom: 0.83rem;
}

dl dt h3 i {
    font-size: 0.64rem;
    line-height: 0.64rem;
    font-weight: 400;
    color: #FE9215;
    font-style: normal;
    float: right;
}

dl dt label {
    font-size: 0.69rem;
    line-height: 0.69rem;
    font-weight: 300;
    color: #666666;
}

dl dt span {
    font-size: 0.69rem;
    line-height: 0.69rem;
    font-weight: 300;
    color: #333333;
}
</style>